<style>
    .avatar-add {
        position: relative;
        width: 373px;
        height: 373px;
        background-color: #F2F2F5;
    }

    .avatar-add p {
        position: absolute;
        top: 70px;
        width: 100%;
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        color: #999;
    }

    .avatar-add img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 168px;
        height: 168px;
        margin: -50px 0 0 -84px;
        border-radius: 100%;
    }

    .avatar-add .upload-img {
        position: absolute;
        left: 50%;
        top: 35px;
        margin: 0 0 0 -56px;
    }
</style>
<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class=" callout-success callout" style="padding: 0;">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                            <li class="breadcrumb-item"><a href="{:url('admin/product/type')}">商品分类</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">分类修改</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">修改分类</div>
                    </div>
                    <div class="card-body">
                        <form action="" method="post" enctype="multipart/form-data">

                            <div class="form-group col-lg-4">
                                <label for="name">分类名称</label>
                                <input type="text" class="form-control" id="name" name="name" value="{$type.name}"
                                    placeholder="请输入分类名称">
                            </div>
                            <div class="form-group col-lg-4">
                                <label for="weigh">权重</label>
                                <input type="text" class="form-control" id="weigh" name="weigh" value="{$type.weigh}">
                            </div>

                            <div class="form-group col-lg-12">
                                <label for="weigh">分类图标</label>
                                <div class="avatar-add">
                                    <p>建议尺寸168*168，支持jpg、png，最大不能超过50KB</p>
                                    <button type="button" class="btn btn-primary upload-img" onclick="cover.click()">
                                        <i class="mdi mdi-cloud-upload-outline"></i>上传分类图标
                                    </button>
                                    <input type="file" id="cover" name="cover" hidden>
                                    <img src="{$type.cover_cdn}" id="img">
                                    <span class="loading"></span>
                                </div>
                            </div>

                            <div class="form-group col-lg-12">
                                <button type="submit" class="btn btn-primary">修改</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

<script>
    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }

    $("#cover").change(function (e) {
        let file = $(this)[0].files[0] ? $(this)[0].files[0] : {};
        // console.log(file);
        let url = GetObjectURL(file);

        $("#img").attr("src", url);
    });
</script>